
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../../actions/user'
import Container from '../../components/Container'
import * as utils from '../../utils'

class Account extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
  
    this.state={
      
    }
  }
  componentDidMount(){
    let {actions} =this.props 
    actions.getScoreInfo({},{ callback:(res)=>{
      if(res.code ==200){
        this.setState({ ...res.data})
      }
    }})
  }
  
 async loginOut(){
    await Promise.all([
      this.otherAsyncFunc1(),
      this.otherAsyncFunc2()
    ]);
   
  }
  otherAsyncFunc1(){
    Actions.loginOut()
    
  }
  otherAsyncFunc2(){
    Actions.getToken()
    this.context.router.history.push(`/login/false`)
    
  }

 

  render(){
    
    return(
      <Container className='cart-container'>
        <div className='my_header_v4_wrap'>
          <div className='my_header_v4'>
            <div className='my_header_v4_main'>
              <div className='my_header_v4_avatar'>
                <img onClick={()=>{ 
                  let userId=localStorage.getItem('userId')
                  if(userId <= 0)
                  {
                    Toast.fail("You haven't landed yet")
                    this.context.router.history.push('/login')
                    return
                  }
                  this.context.router.history.push('/account/edit')
                }} src={require('../../assets/images/header.png')}/>
              </div>
              <div className='my_header_v4_msg'>
                <div className='my_header_v4_name'>
                  <span className='my_header_v4_name_text'>{localStorage.getItem('userName')}</span>
                </div>
                <div className='my_header_v4_score'>
                  <div className='score'>
                    <span className='score-top'>Total</span>
                    <span className='score-bottom'>{this.state.total_score||0}</span>
                  </div>
                  <div className='score'>
                    <span className='score-top'>Available</span>
                    <span className='score-bottom'>{this.state.withdraw_score||0}</span>
                  </div>
                  <div className='score'>
                    <span className='score-top'>Freezing</span>
                    <span className='score-bottom'>{this.state.frozen_score || 0}</span>
                  </div>
                </div>
              </div>
              <span className='my_header_v4_settings' onClick={()=>{ this.loginOut()}}><i className='iconfont icon-tuichu'></i>loginOut</span>
            </div>
          </div>
        </div>
        <div className='my_account_list clearfix'>
          <div className='account_item' onClick={()=>{ this.context.router.history.push(`/order/list`)}}>
            <img src={require('../../assets/images/account2.png')} className='img'/>
            <span className='account_text'>Your orders</span>
          </div>
          <div className='account_item' onClick={()=>{ this.context.router.history.push(`/address/list/normal`)}}>
            <img src={require('../../assets/images/account1.png')} className='img'/>
            <span className='account_text'>Your address</span>
          </div>
        </div>

      
      </Container>
      )
  }
  

}

function mapStateToProps(state){
  return{ 
  }
}
function mapDispatchToProps(dispatch){
  return{
    actions:bindActionCreators(Actions,dispatch)
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Account)
